<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      @click="updateIndex"
      :instruction="instruction" :showRadioCheck="true">
    </play-instruction>
    <div class="select-row" v-for="item in getCurrentLotteryState" :key="item.id">
      <balls-and-selector 
        @click="handleUpdateData"
        :activeSwitchIndex=activeSwitchIndex
        :item="item">
      </balls-and-selector>
    </div>
  </div>
  <div class="number-select" v-else>
    <balls-and-cleaner-phone 
      :activeSwitchIndex="getRadioSelectorIndex"
      @click="handleUpdateData"
      :item="getCurrentLotteryState[0]">
    </balls-and-cleaner-phone>
    <balls-and-selector-phone 
      :activeSwitchIndex="getRadioSelectorIndex"
      @click="handleUpdateData"
      :item="getCurrentLotteryState[1]">
    </balls-and-selector-phone>
    
  </div>
</template>

<script>
import BallsAndSelector from '@/components/lottery-type/common/balls-and-selector'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import BallsAndSelectorPhone from '@/components/lottery-type/common/balls-and-selector-phone'
import BallsAndCleanerPhone from '@/components/lottery-type/common/balls-and-cleaner-phone'
import { ballWithSelectorMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [ballWithSelectorMixin],
  components: {
    PlayInstruction,
    BallsAndSelector,
    BallsAndSelectorPhone,
    BallsAndCleanerPhone
  },
  data() {
    return {
      instruction: '胆拖',
      activeSwitchIndex: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
  
</style>